<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>

<!-- 文件引入开始 -->
<link rel="shortcut icon" href="../favicon.ico">
<link rel="stylesheet" href="../node_modules/bootstrap/dist/css/bootstrap.css">

<link rel="stylesheet" href="../css/register.css">
<!-- 文件引入结束 -->

<title>小米账号-注册</title>

</head>
<body>
    <div class="box">
        <!-- 1.左开始 -->
        <div class="left fl">
            <img class="p1" src="../images/login/1.png" alt="">
        </div>

        <!-- 2.右 -->
        <div class="right fl">
            <!-- 2.1上 -->
            <div class="top">
                <!-- 1 -->
                <div class="top1 fl">
                    <img class="p2" src="../images/login/2.png" alt="">
                    <span class="text1">小米账号</span>
                </div>
                <!-- 2 -->
                <div class="top2 fr">
                    <a class="t3" href="">用户协议</a>
                    <a class="t3" href="">隐私政策</a>
                    <a class="t3" href="">帮助中心</a>
                    <span>|</span>
                    <a class="t3" href="">
                        <span>中文简体</span>
                        <span class="caret"></span>
                    </a>
                </div>

            </div>
            
            <!-- 2.2下 -->
            <div class="bottom">
                <div class="bot-auto">
                    <div class="bot-box">
                        
                        <div class="tit-box">
                            <div class="h3 fl">
                                <span class="s1">登录</span>
                            </div>
                            <div class="h3 fl">
                                <span class="s2">注册</span>
                            </div>
                        </div>
                        <form>
                            <input type="text" class="form-control g" name="username" placeholder="邮箱 / 手机号码 / 小米ID">
                            <input type="password" class="form-control g" name="password" placeholder="请输入密码">
                            <input type="password" class="form-control g" name="repassword" placeholder="请确认密码">
                            <div class="checkbox g0">
                                <label>
                                <input type="checkbox" name="agree"> 请同意协议
                                </label>
                            </div>
                            <button type="button" class="btn btn-default submit g3">注册</button>
                            <p class="g3p">
                                <span class="fl">收不到验证码?</span>
                                <!-- <span class="fr">手机号登录</span> -->
                            </p>
                        </form>
                        
                            
                    </div>
                    <p class="tz">小米公司版权所有-京ICP备10046444-京公网安备11010802020134号-京ICP证110507号</p>
                </div>
            </div>
        </div>

    </div>



</body>
<!-- 08. -->
<script src="../node_modules/jquery/dist/jquery.js"></script>
<script src="../node_modules/layui-layer/dist/layer.js"></script>
<script src="../node_modules/bootstrap/dist/js/bootstrap.js"></script>

<script>
// 10. 提交按钮 submit 选中
$('.submit').click(function(){
    // // 11. 验证表单
    // // 13. 禁用提交按钮
    $(this).prop('disabled',true)
    // // 14. 加载弹出层
    // var loadindex = layer.load(0, {
    //     shade: [1,'#000']
    // });
    var loadindex = layer.load(1, {
        shade: [0.1,'#fff'] //0.1透明度的白色背景
    });
    // // 12. 发送Ajax请求
    $.post('../php/register.php',$('form').serialize(),res=>{
        console.log(res);
        // 19.
        var {meta:{status,msg}} = res;
        layer.close(loadindex)
        // 20.判断
        if(status === 2){
            layer.msg(msg,{
                icon:1,
                time:1500
            },function(){
                location.href = "login.html"
            })
        }else{
            // 21.解锁
            $(this).prop('disabled',false)
            layer.msg(msg,{
                icon:2,
                time:1500
            })
        }
    },'json')
})
</script>
</html>